<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>济南联宇网络科技有限公司 - 工业数字孪生解决方案</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link
      href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css"
      rel="stylesheet"
    />
    <script src="./js/chart.umd.min.js"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
      rel="stylesheet"
    />

    <script>
      tailwind.config = {
        theme: {
          extend: {
            colors: {
              primary: "#0F3460",
              secondary: "#E94560",
              accent: "#FF9800",
              dark: "#1A1A2E",
              light: "#F5F5F7",
            },
            fontFamily: {
              inter: ["Inter", "sans-serif"],
            },
          },
        },
      };
    </script>

    <style type="text/tailwindcss">
      @layer utilities {
        .content-auto {
          content-visibility: auto;
        }
        .text-shadow {
          text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .text-gradient {
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
        .scrollbar-hide::-webkit-scrollbar {
          display: none;
        }
        .bg-blur {
          backdrop-filter: blur(8px);
        }
      }
    </style>
  </head>
  <body class="font-inter bg-white text-gray-800 overflow-x-hidden">
    <!-- 导航栏 -->
    <header
      id="navbar"
      class="fixed w-full z-50 transition-all duration-300 bg-transparent"
    >
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center py-4">
          <div class="flex items-center">
            <a href="#" class="flex items-center">
              <div
                class="w-10 h-10 rounded-lg bg-primary flex items-center justify-center text-white font-bold text-xl"
              >
                <img src="./img/logo.png" alt="logo" />
              </div>
              <span class="ml-3 text-xl font-bold text-white"
                >济南联宇网络科技</span
              >
            </a>
          </div>

          <!-- 桌面导航 -->
          <nav class="hidden md:flex space-x-8">
            <a
              href="#about"
              class="text-white hover:text-accent transition-colors"
              >关于我们</a
            >
            <a
              href="#services"
              class="text-white hover:text-accent transition-colors"
              >核心业务</a
            >
            <a
              href="#cases"
              class="text-white hover:text-accent transition-colors"
              >成功案例</a
            >
            <a
              href="#advantages"
              class="text-white hover:text-accent transition-colors"
              >服务优势</a
            >
            <a
              href="#contact"
              class="text-white hover:text-accent transition-colors"
              >联系我们</a
            >
          </nav>

          <!-- 联系按钮 -->
          <div class="hidden md:block">
            <a
              href="#contact"
              class="bg-accent hover:bg-accent/90 text-white font-medium py-2 px-6 rounded-full transition-all transform hover:scale-105"
            >
              咨询业务
            </a>
          </div>

          <!-- 移动端菜单按钮 -->
          <button id="menu-toggle" class="md:hidden text-white text-2xl">
            <i class="fa fa-bars"></i>
          </button>
        </div>
      </div>

      <!-- 移动端导航菜单 -->
      <div
        id="mobile-menu"
        class="md:hidden bg-white shadow-lg rounded-b-xl mx-4 overflow-hidden hidden transition-all duration-300 transform -translate-y-2 opacity-0"
      >
        <div class="flex flex-col py-4 px-6 space-y-4">
          <a
            href="#about"
            class="text-gray-800 hover:text-primary font-medium py-2 transition-colors"
            >关于我们</a
          >
          <a
            href="#services"
            class="text-gray-800 hover:text-primary font-medium py-2 transition-colors"
            >核心业务</a
          >
          <a
            href="#cases"
            class="text-gray-800 hover:text-primary font-medium py-2 transition-colors"
            >成功案例</a
          >
          <a
            href="#advantages"
            class="text-gray-800 hover:text-primary font-medium py-2 transition-colors"
            >服务优势</a
          >
          <a
            href="#contact"
            class="text-gray-800 hover:text-primary font-medium py-2 transition-colors"
            >联系我们</a
          >
          <a
            href="#contact"
            class="bg-accent text-white font-medium py-3 px-6 rounded-full text-center transition-all"
          >
            咨询业务
          </a>
        </div>
      </div>
    </header>

    <!-- 首页Banner -->
    <section
      class="relative h-screen flex items-center justify-center overflow-hidden"
    >
      <div class="absolute inset-0 z-0">
        <!-- 工业数字孪生控制台展示 -->
        <img
          src="./img/1-1920x1080.jpg"
          alt="工业数字孪生技术控制台展示，包含3D模型和实时数据监控界面"
          class="w-full h-full object-cover"
        />
        <div
          class="absolute inset-0 bg-gradient-to-r from-primary/90 to-dark/70"
        ></div>
      </div>

      <div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div class="max-w-3xl">
          <h1
            class="text-[clamp(2.5rem,5vw,4rem)] font-bold text-white leading-tight mb-6 text-shadow"
          >
            工业数字孪生<br />全栈解决方案服务商
          </h1>
          <p
            class="text-[clamp(1rem,2vw,1.25rem)] text-gray-100 mb-8 max-w-2xl"
          >
            以数字孪生技术重构工业价值，用精细化模型赋能制造升级，为企业提供从数据采集到应用落地的一站式工业数字化服务
          </p>
          <div class="flex flex-wrap gap-4">
            <a
              href="#services"
              class="bg-accent hover:bg-accent/90 text-white font-medium py-3 px-8 rounded-full transition-all transform hover:scale-105 hover:shadow-lg"
            >
              了解业务 <i class="fa fa-arrow-right ml-2"></i>
            </a>
            <a
              href="#contact"
              class="bg-white/10 backdrop-blur-sm hover:bg-white/20 text-white border border-white/30 font-medium py-3 px-8 rounded-full transition-all"
            >
              联系我们
            </a>
          </div>
        </div>
      </div>

      <div
        class="absolute bottom-10 left-1/2 transform -translate-x-1/2 text-white animate-bounce"
      >
        <a href="#about" class="flex flex-col items-center">
          <span class="mb-2 text-sm">向下滚动</span>
          <i class="fa fa-chevron-down"></i>
        </a>
      </div>
    </section>

    <!-- 关于我们 -->
    <section id="about" class="py-20 bg-light">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
          <h2
            class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold text-primary mb-4"
          >
            关于我们
          </h2>
          <div class="w-20 h-1 bg-accent mx-auto mb-6"></div>
          <p class="text-gray-600 max-w-3xl mx-auto">
            深耕工业数字化领域，聚焦工业场景下的数字孪生技术研发与工业模型定制服务
          </p>
        </div>

        <div class="grid md:grid-cols-2 gap-12 items-center">
          <div class="order-2 md:order-1">
            <h3 class="text-2xl font-semibold text-primary mb-4">
              济南联宇网络科技有限公司
            </h3>
            <p class="text-gray-600 mb-6 leading-relaxed">
              我们依托对工业制造流程的深刻理解，结合三维建模、实时数据交互、仿真模拟等核心技术能力，为汽车、机械、能源、化工等行业客户打造"物理实体-数字孪生"闭环。
            </p>
            <p class="text-gray-600 mb-8 leading-relaxed">
              助力企业实现生产流程优化、设备运维智能化、人员培训高效化，推动工业数字化转型从"概念"走向"实战"。
            </p>

            <div class="grid grid-cols-2 gap-6">
              <div class="flex items-start">
                <div
                  class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-4 flex-shrink-0"
                >
                  <i class="fa fa-lightbulb-o text-xl"></i>
                </div>
                <div>
                  <h4 class="font-semibold mb-2">技术创新</h4>
                  <p class="text-gray-600 text-sm">专注数字孪生核心技术研发</p>
                </div>
              </div>

              <div class="flex items-start">
                <div
                  class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-4 flex-shrink-0"
                >
                  <i class="fa fa-industry text-xl"></i>
                </div>
                <div>
                  <h4 class="font-semibold mb-2">行业经验</h4>
                  <p class="text-gray-600 text-sm">5年以上工业领域服务经验</p>
                </div>
              </div>

              <div class="flex items-start">
                <div
                  class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-4 flex-shrink-0"
                >
                  <i class="fa fa-users text-xl"></i>
                </div>
                <div>
                  <h4 class="font-semibold mb-2">专业团队</h4>
                  <p class="text-gray-600 text-sm">技术专家与行业顾问组成</p>
                </div>
              </div>

              <div class="flex items-start">
                <div
                  class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-4 flex-shrink-0"
                >
                  <i class="fa fa-handshake-o text-xl"></i>
                </div>
                <div>
                  <h4 class="font-semibold mb-2">客户至上</h4>
                  <p class="text-gray-600 text-sm">量身定制解决方案</p>
                </div>
              </div>
            </div>
          </div>

          <div class="order-1 md:order-2 relative">
            <div
              class="relative z-10 rounded-xl overflow-hidden shadow-2xl transform transition-transform hover:scale-[1.02] duration-500"
            >
              <!-- 数字孪生技术团队工作场景 -->
              <img
                src="./img/2-800x600.jpg"
                alt="技术团队在开发工业数字孪生系统，展示电脑上的3D模型和数据面板"
                class="w-full h-auto"
              />
            </div>
            <div
              class="absolute -bottom-6 -left-6 w-64 h-64 bg-accent/10 rounded-full -z-10"
            ></div>
            <div
              class="absolute -top-6 -right-6 w-40 h-40 bg-primary/10 rounded-full -z-10"
            ></div>
          </div>
        </div>
      </div>
    </section>

    <!-- 核心业务 -->
    <section id="services" class="py-20 bg-white">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
          <h2
            class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold text-primary mb-4"
          >
            核心业务
          </h2>
          <div class="w-20 h-1 bg-accent mx-auto mb-6"></div>
          <p class="text-gray-600 max-w-3xl mx-auto">
            提供工业数字孪生全栈解决方案与高精度工业模型定制服务，满足不同行业数字化需求
          </p>
        </div>

        <!-- 业务标签页 -->
        <div class="mb-12">
          <div class="flex flex-wrap justify-center gap-4">
            <button
              class="service-tab active py-2 px-6 rounded-full font-medium transition-all"
              data-tab="digital-twin"
            >
              工业数字孪生解决方案
            </button>
            <button
              class="service-tab py-2 px-6 rounded-full font-medium transition-all"
              data-tab="modeling"
            >
              工业模型制作
            </button>
          </div>
        </div>

        <!-- 数字孪生解决方案 -->
        <div id="digital-twin" class="service-content active">
          <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mb-16">
            <div
              class="bg-light rounded-xl p-6 shadow-md hover:shadow-xl transition-all transform hover:-translate-y-1"
            >
              <div
                class="w-14 h-14 rounded-lg bg-primary/10 flex items-center justify-center text-primary mb-5"
              >
                <i class="fa fa-exchange text-2xl"></i>
              </div>
              <h3 class="text-xl font-semibold mb-3">实时数据孪生</h3>
              <p class="text-gray-600 mb-4 text-sm">
                打通物理与数字的实时通道，实现设备状态、生产参数的全面捕获与同步。
              </p>
              <ul class="space-y-2 text-sm text-gray-600">
                <li class="flex items-start">
                  <i class="fa fa-check text-accent mt-1 mr-2"></i>
                  <span>多协议兼容采集</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check text-accent mt-1 mr-2"></i>
                  <span>100ms级高速数据同步</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check text-accent mt-1 mr-2"></i>
                  <span>智能数据补全算法</span>
                </li>
              </ul>
            </div>

            <div
              class="bg-light rounded-xl p-6 shadow-md hover:shadow-xl transition-all transform hover:-translate-y-1"
            >
              <div
                class="w-14 h-14 rounded-lg bg-primary/10 flex items-center justify-center text-primary mb-5"
              >
                <i class="fa fa-cogs text-2xl"></i>
              </div>
              <h3 class="text-xl font-semibold mb-3">实时仿真模拟</h3>
              <p class="text-gray-600 mb-4 text-sm">
                在虚拟环境中验证工业价值，提前发现问题，降低物理试验成本。
              </p>
              <ul class="space-y-2 text-sm text-gray-600">
                <li class="flex items-start">
                  <i class="fa fa-check text-accent mt-1 mr-2"></i>
                  <span>设备运行仿真</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check text-accent mt-1 mr-2"></i>
                  <span>操作流程仿真</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check text-accent mt-1 mr-2"></i>
                  <span>力学行为仿真</span>
                </li>
              </ul>
            </div>

            <div
              class="bg-light rounded-xl p-6 shadow-md hover:shadow-xl transition-all transform hover:-translate-y-1"
            >
              <div
                class="w-14 h-14 rounded-lg bg-primary/10 flex items-center justify-center text-primary mb-5"
              >
                <i class="fa fa-link text-2xl"></i>
              </div>
              <h3 class="text-xl font-semibold mb-3">沉浸式交互体验</h3>
              <p class="text-gray-600 mb-4 text-sm">
                打破传统监控边界，提供多样化交互形式，提升工业场景的科技感与实操性。
              </p>
              <ul class="space-y-2 text-sm text-gray-600">
                <li class="flex items-start">
                  <i class="fa fa-check text-accent mt-1 mr-2"></i>
                  <span>多终端交互场景</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check text-accent mt-1 mr-2"></i>
                  <span>手势交互控制</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check text-accent mt-1 mr-2"></i>
                  <span>多场景适配</span>
                </li>
              </ul>
            </div>

            <div
              class="bg-light rounded-xl p-6 shadow-md hover:shadow-xl transition-all transform hover:-translate-y-1"
            >
              <div
                class="w-14 h-14 rounded-lg bg-primary/10 flex items-center justify-center text-primary mb-5"
              >
                <i class="fa fa-cloud-upload text-2xl"></i>
              </div>
              <h3 class="text-xl font-semibold mb-3">多平台部署</h3>
              <p class="text-gray-600 mb-4 text-sm">
                适配企业多样化需求，提供灵活的部署方案，确保系统高效运行。
              </p>
              <ul class="space-y-2 text-sm text-gray-600">
                <li class="flex items-start">
                  <i class="fa fa-check text-accent mt-1 mr-2"></i>
                  <span>BS端部署</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check text-accent mt-1 mr-2"></i>
                  <span>CS端部署</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-check text-accent mt-1 mr-2"></i>
                  <span>APP端部署</span>
                </li>
              </ul>
            </div>
          </div>

          <!-- 部署类型对比 -->
          <div class="bg-light rounded-xl p-8 shadow-lg">
            <h3 class="text-2xl font-semibold text-center mb-8">
              部署类型对比
            </h3>
            <div class="overflow-x-auto">
              <table class="w-full min-w-[768px]">
                <thead>
                  <tr class="bg-primary text-white">
                    <th class="py-4 px-6 text-left rounded-tl-lg">部署类型</th>
                    <th class="py-4 px-6 text-left">核心优势</th>
                    <th class="py-4 px-6 text-left rounded-tr-lg">适配场景</th>
                  </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                  <tr class="hover:bg-gray-50">
                    <td class="py-4 px-6 font-medium">BS端部署</td>
                    <td class="py-4 px-6 text-sm">
                      基于UnityWebGL技术，实现高质量3D渲染与Web前端融合；支持与MES、ERP等现有IT系统集成
                    </td>
                    <td class="py-4 px-6 text-sm">
                      企业多部门协同查看、远程监控、跨厂区数据共享
                    </td>
                  </tr>
                  <tr class="hover:bg-gray-50">
                    <td class="py-4 px-6 font-medium">CS端部署</td>
                    <td class="py-4 px-6 text-sm">
                      充分发挥本地计算机性能，呈现超高清模型细节与复杂仿真效果，支持大场景、高并发数据处理
                    </td>
                    <td class="py-4 px-6 text-sm">
                      研发部门高精度仿真验证、技术团队深度运维分析
                    </td>
                  </tr>
                  <tr class="hover:bg-gray-50">
                    <td class="py-4 px-6 font-medium rounded-bl-lg">
                      APP端部署
                    </td>
                    <td class="py-4 px-6 text-sm">
                      支持IOS、Android、HarmonyOS系统，适配手机、平板等移动设备，随时随地查看设备状态
                    </td>
                    <td class="py-4 px-6 text-sm rounded-br-lg">
                      现场运维人员移动巡检、管理层实时掌握生产动态
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>

        <!-- 工业模型制作 -->
        <div id="modeling" class="service-content hidden">
          <div class="grid md:grid-cols-2 gap-12 items-center mb-16">
            <div>
              <!-- 高精度工业设备3D模型展示 -->
              <img
                src="./img/3-800x600.jpg"
                alt="高精度工业设备3D模型展示，包含详细的内部结构和组件"
                class="w-full h-auto rounded-xl shadow-lg"
              />
            </div>
            <div>
              <h3 class="text-2xl font-semibold text-primary mb-6">
                多源数据建模
              </h3>
              <div class="space-y-6">
                <div class="flex">
                  <div
                    class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-4 flex-shrink-0"
                  >
                    <i class="fa fa-exchange text-xl"></i>
                  </div>
                  <div>
                    <h4 class="font-semibold mb-2">模型转化重构</h4>
                    <p class="text-gray-600 text-sm">
                      支持工业SolidWorks、Creo、Proe、犀牛等机械设计软件，以及建筑BIM/Revit、GIS地理数据的模型互通转换，结合人工面数简化，平衡模型精度与运行性能。
                    </p>
                  </div>
                </div>

                <div class="flex">
                  <div
                    class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-4 flex-shrink-0"
                  >
                    <i class="fa fa-pencil text-xl"></i>
                  </div>
                  <div>
                    <h4 class="font-semibold mb-2">人工精准绘制</h4>
                    <p class="text-gray-600 text-sm">
                      基于CAD图纸、现场视频/图片，结合卫星遥感、高清街景数据，人工还原厂区布局、车间结构、设备外观与内部细节，确保模型与物理实体1:1匹配。
                    </p>
                  </div>
                </div>

                <div class="flex">
                  <div
                    class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-4 flex-shrink-0"
                  >
                    <i class="fa fa-camera text-xl"></i>
                  </div>
                  <div>
                    <h4 class="font-semibold mb-2">扫描采集建模</h4>
                    <p class="text-gray-600 text-sm">
                      采用激光扫描、倾斜摄影技术快速获取物体空间坐标数据，配合人工修复、细节优化，高效还原复杂设备结构、不规则工件形态。
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="bg-light rounded-xl p-8 shadow-lg">
            <h3 class="text-2xl font-semibold text-center mb-8">
              模型应用适配
            </h3>
            <div class="grid md:grid-cols-3 gap-6">
              <div
                class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition-all"
              >
                <div
                  class="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center text-primary mx-auto mb-5"
                >
                  <i class="fa fa-cube text-2xl"></i>
                </div>
                <h4 class="text-lg font-semibold text-center mb-3">
                  数字孪生基础模型
                </h4>
                <p class="text-gray-600 text-sm text-center">
                  为工业孪生系统提供底层高精度模型支撑，确保仿真、交互功能稳定运行。
                </p>
              </div>

              <div
                class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition-all"
              >
                <div
                  class="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center text-primary mx-auto mb-5"
                >
                  <i class="fa fa-eye text-2xl"></i>
                </div>
                <h4 class="text-lg font-semibold text-center mb-3">
                  产品展示模型
                </h4>
                <p class="text-gray-600 text-sm text-center">
                  用于企业展会、官网展示，突出产品结构细节与技术优势，提升品牌形象。
                </p>
              </div>

              <div
                class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition-all"
              >
                <div
                  class="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center text-primary mx-auto mb-5"
                >
                  <i class="fa fa-graduation-cap text-2xl"></i>
                </div>
                <h4 class="text-lg font-semibold text-center mb-3">
                  培训教学模型
                </h4>
                <p class="text-gray-600 text-sm text-center">
                  简化冗余细节，突出核心部件与操作要点，适配培训场景轻量化需求，提升培训效率。
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 成功案例 -->
    <section id="cases" class="py-20 bg-gray-50">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
          <h2
            class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold text-primary mb-4"
          >
            成功案例
          </h2>
          <div class="w-20 h-1 bg-accent mx-auto mb-6"></div>
          <p class="text-gray-600 max-w-3xl mx-auto">
            我们为各行业客户提供专业的工业数字孪生解决方案，助力企业数字化转型
          </p>
        </div>

        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          <div
            class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all group"
          >
            <div class="relative overflow-hidden">
              <!-- 汽车生产线数字孪生系统 -->
              <img
                src="./img/4-600x400.jpg"
                alt="汽车零部件产线数字孪生系统界面，显示实时生产数据和3D生产线模型"
                class="w-full h-56 object-cover transition-transform duration-500 group-hover:scale-110"
              />
              <div
                class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end"
              >
                <div class="p-6">
                  <span class="text-accent text-sm font-medium"
                    >汽车制造行业</span
                  >
                </div>
              </div>
            </div>
            <div class="p-6">
              <h3
                class="text-xl font-semibold mb-3 group-hover:text-primary transition-colors"
              >
                汽车零部件厂商产线数字孪生项目
              </h3>
              <p class="text-gray-600 text-sm mb-4">
                构建整条冲压产线数字孪生系统，实现设备运行状态实时监控、故障预警、虚拟调试。
              </p>
              <div class="flex items-center text-sm text-gray-500">
                <div class="flex items-center mr-4">
                  <i class="fa fa-line-chart text-accent mr-2"></i>
                  <span>停机时间减少20%</span>
                </div>
                <div class="flex items-center">
                  <i class="fa fa-clock-o text-accent mr-2"></i>
                  <span>调试周期缩短30%</span>
                </div>
              </div>
            </div>
          </div>

          <div
            class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all group"
          >
            <div class="relative overflow-hidden">
              <!-- 重型机械VR培训系统 -->
              <img
                src="./img/5-600x400.jpg"
                alt="重型机械VR培训系统，用户佩戴VR设备进行虚拟维修操作"
                class="w-full h-56 object-cover transition-transform duration-500 group-hover:scale-110"
              />
              <div
                class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end"
              >
                <div class="p-6">
                  <span class="text-accent text-sm font-medium"
                    >机械制造行业</span
                  >
                </div>
              </div>
            </div>
            <div class="p-6">
              <h3
                class="text-xl font-semibold mb-3 group-hover:text-primary transition-colors"
              >
                重型机械企业设备培训模型项目
              </h3>
              <p class="text-gray-600 text-sm mb-4">
                为大型挖掘机核心部件制作高精度模型，结合VR交互实现维修流程模拟培训。
              </p>
              <div class="flex items-center text-sm text-gray-500">
                <div class="flex items-center">
                  <i class="fa fa-users text-accent mr-2"></i>
                  <span>新人上手时间从3个月缩短至1个月</span>
                </div>
              </div>
            </div>
          </div>

          <div
            class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all group"
          >
            <div class="relative overflow-hidden">
              <!-- 化工园区数字孪生监控系统 -->
              <img
                src="./img/6-600x400.jpg"
                alt="化工园区数字孪生监控系统，展示三维园区模型和实时安全数据"
                class="w-full h-56 object-cover transition-transform duration-500 group-hover:scale-110"
              />
              <div
                class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end"
              >
                <div class="p-6">
                  <span class="text-accent text-sm font-medium">化工行业</span>
                </div>
              </div>
            </div>
            <div class="p-6">
              <h3
                class="text-xl font-semibold mb-3 group-hover:text-primary transition-colors"
              >
                化工园区数字孪生监控项目
              </h3>
              <p class="text-gray-600 text-sm mb-4">
                整合园区GIS数据、设备传感器数据，构建三维孪生园区，实现泄漏预警、应急演练虚拟模拟。
              </p>
              <div class="flex items-center text-sm text-gray-500">
                <div class="flex items-center">
                  <i class="fa fa-shield text-accent mr-2"></i>
                  <span>安全管理效率显著提升</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="text-center mt-12">
          <a
            href="#contact"
            class="inline-flex items-center bg-primary hover:bg-primary/90 text-white font-medium py-3 px-8 rounded-full transition-all"
          >
            查看更多案例 <i class="fa fa-arrow-right ml-2"></i>
          </a>
        </div>
      </div>
    </section>

    <!-- 服务优势 -->
    <section id="advantages" class="py-20 bg-white">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
          <h2
            class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold text-primary mb-4"
          >
            服务优势
          </h2>
          <div class="w-20 h-1 bg-accent mx-auto mb-6"></div>
          <p class="text-gray-600 max-w-3xl mx-auto">
            我们凭借专业的技术能力和丰富的行业经验，为客户提供高质量的工业数字化服务
          </p>
        </div>

        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
          <div
            class="bg-light rounded-xl p-8 text-center relative overflow-hidden group"
          >
            <div
              class="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center text-primary mx-auto mb-6 z-10 relative"
            >
              <i class="fa fa-industry text-2xl"></i>
            </div>
            <h3 class="text-xl font-semibold mb-4 z-10 relative">
              工业场景深度适配
            </h3>
            <p class="text-gray-600 text-sm z-10 relative">
              团队具备5年以上工业领域服务经验，熟悉汽车制造、机械加工、能源运维等行业流程，避免"技术与场景脱节"问题。
            </p>
            <div
              class="absolute top-0 right-0 w-32 h-32 bg-accent/5 rounded-full -mt-16 -mr-16 group-hover:bg-accent/10 transition-colors"
            ></div>
          </div>

          <div
            class="bg-light rounded-xl p-8 text-center relative overflow-hidden group"
          >
            <div
              class="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center text-primary mx-auto mb-6 z-10 relative"
            >
              <i class="fa fa-link text-2xl"></i>
            </div>
            <h3 class="text-xl font-semibold mb-4 z-10 relative">
              全链条技术能力
            </h3>
            <p class="text-gray-600 text-sm z-10 relative">
              从数据采集、模型构建到仿真落地、系统集成，无需依赖第三方服务商，保障项目效率与质量可控。
            </p>
            <div
              class="absolute top-0 right-0 w-32 h-32 bg-accent/5 rounded-full -mt-16 -mr-16 group-hover:bg-accent/10 transition-colors"
            ></div>
          </div>

          <div
            class="bg-light rounded-xl p-8 text-center relative overflow-hidden group"
          >
            <div
              class="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center text-primary mx-auto mb-6 z-10 relative"
            >
              <i class="fa fa-sliders text-2xl"></i>
            </div>
            <h3 class="text-xl font-semibold mb-4 z-10 relative">
              定制化解决方案
            </h3>
            <p class="text-gray-600 text-sm z-10 relative">
              拒绝"一刀切"产品，根据客户产能规模、业务痛点、现有系统架构，量身设计技术方案，降低数字化转型成本。
            </p>
            <div
              class="absolute top-0 right-0 w-32 h-32 bg-accent/5 rounded-full -mt-16 -mr-16 group-hover:bg-accent/10 transition-colors"
            ></div>
          </div>

          <div
            class="bg-light rounded-xl p-8 text-center relative overflow-hidden group"
          >
            <div
              class="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center text-primary mx-auto mb-6 z-10 relative"
            >
              <i class="fa fa-life-ring text-2xl"></i>
            </div>
            <h3 class="text-xl font-semibold mb-4 z-10 relative">
              持续服务保障
            </h3>
            <p class="text-gray-600 text-sm z-10 relative">
              项目交付后提供1年免费技术支持，定期进行系统巡检与版本更新，确保数字孪生系统长期稳定运行。
            </p>
            <div
              class="absolute top-0 right-0 w-32 h-32 bg-accent/5 rounded-full -mt-16 -mr-16 group-hover:bg-accent/10 transition-colors"
            ></div>
          </div>
        </div>

        <!-- 技术能力图表 -->
        <div class="mt-20 bg-light rounded-xl p-8 shadow-lg">
          <h3 class="text-2xl font-semibold text-center mb-12">核心技术能力</h3>
          <div class="grid md:grid-cols-2 gap-8 items-center">
            <div>
              <canvas id="skillsChart" width="400" height="400"></canvas>
            </div>
            <div>
              <h4 class="text-xl font-semibold mb-6 text-primary">
                我们的技术优势
              </h4>
              <div class="space-y-6">
                <div>
                  <div class="flex justify-between mb-2">
                    <span class="font-medium">三维建模与渲染</span>
                    <span>95%</span>
                  </div>
                  <div class="w-full bg-gray-200 rounded-full h-2.5">
                    <div
                      class="bg-primary h-2.5 rounded-full"
                      style="width: 95%"
                    ></div>
                  </div>
                </div>

                <div>
                  <div class="flex justify-between mb-2">
                    <span class="font-medium">工业数据采集与处理</span>
                    <span>90%</span>
                  </div>
                  <div class="w-full bg-gray-200 rounded-full h-2.5">
                    <div
                      class="bg-primary h-2.5 rounded-full"
                      style="width: 90%"
                    ></div>
                  </div>
                </div>

                <div>
                  <div class="flex justify-between mb-2">
                    <span class="font-medium">实时仿真与模拟</span>
                    <span>88%</span>
                  </div>
                  <div class="w-full bg-gray-200 rounded-full h-2.5">
                    <div
                      class="bg-primary h-2.5 rounded-full"
                      style="width: 88%"
                    ></div>
                  </div>
                </div>

                <div>
                  <div class="flex justify-between mb-2">
                    <span class="font-medium">VR/AR交互开发</span>
                    <span>85%</span>
                  </div>
                  <div class="w-full bg-gray-200 rounded-full h-2.5">
                    <div
                      class="bg-primary h-2.5 rounded-full"
                      style="width: 85%"
                    ></div>
                  </div>
                </div>

                <div>
                  <div class="flex justify-between mb-2">
                    <span class="font-medium">工业系统集成</span>
                    <span>92%</span>
                  </div>
                  <div class="w-full bg-gray-200 rounded-full h-2.5">
                    <div
                      class="bg-primary h-2.5 rounded-full"
                      style="width: 92%"
                    ></div>
                  </div>
                </div>
                <div>
                  <div class="flex justify-between mb-2">
                    <span class="font-medium">跨平台部署</span>
                    <span>87%</span>
                  </div>
                  <div class="w-full bg-gray-200 rounded-full h-2.5">
                    <div
                      class="bg-primary h-2.5 rounded-full"
                      style="width: 87%"
                    ></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 联系我们 -->
    <section id="contact" class="py-20 bg-primary text-white">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
          <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold mb-4">
            联系我们
          </h2>
          <div class="w-20 h-1 bg-accent mx-auto mb-6"></div>
          <p class="text-gray-300 max-w-3xl mx-auto">
            无论您有任何疑问或需求，我们都将竭诚为您服务，期待与您携手共创工业数字化未来
          </p>
        </div>

        <div class="grid md:grid-cols-2 gap-12">
          <div>
            <h3 class="text-2xl font-semibold mb-8">联系方式</h3>

            <div class="space-y-6">
              <div class="flex items-start">
                <div
                  class="w-12 h-12 rounded-full bg-white/10 flex items-center justify-center text-accent mr-4 flex-shrink-0"
                >
                  <i class="fa fa-map-marker text-xl"></i>
                </div>
                <div>
                  <h4 class="font-semibold mb-1">公司地址</h4>
                  <p class="text-gray-300">
                    山东省济南市高新区舜华路2000号舜泰广场1号楼东座6楼601A室
                  </p>
                </div>
              </div>

              <div class="flex items-start">
                <div
                  class="w-12 h-12 rounded-full bg-white/10 flex items-center justify-center text-accent mr-4 flex-shrink-0"
                >
                  <i class="fa fa-phone text-xl"></i>
                </div>
                <div>
                  <h4 class="font-semibold mb-1">联系电话</h4>
                  <p class="text-gray-300">18766416767</p>
                </div>
              </div>

              <div class="flex items-start">
                <div
                  class="w-12 h-12 rounded-full bg-white/10 flex items-center justify-center text-accent mr-4 flex-shrink-0"
                >
                  <i class="fa fa-envelope text-xl"></i>
                </div>
                <div>
                  <h4 class="font-semibold mb-1">电子邮箱</h4>
                  <p class="text-gray-300">jnzhy@qq.com</p>
                </div>
              </div>
            </div>

            <div class="mt-12">
              <h4 class="font-semibold mb-4">关注我们</h4>
              <div class="flex space-x-4">
                <a
                  href="#"
                  class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center text-white hover:bg-accent transition-colors"
                >
                  <i class="fa fa-weixin"></i>
                </a>
                <a
                  href="#"
                  class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center text-white hover:bg-accent transition-colors"
                >
                  <i class="fa fa-weibo"></i>
                </a>
                <a
                  href="#"
                  class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center text-white hover:bg-accent transition-colors"
                >
                  <i class="fa fa-linkedin"></i>
                </a>
                <a
                  href="#"
                  class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center text-white hover:bg-accent transition-colors"
                >
                  <i class="fa fa-youtube-play"></i>
                </a>
              </div>
            </div>
          </div>

          <div>
            <form class="bg-white rounded-xl p-8 text-gray-800">
              <h3 class="text-2xl font-semibold mb-6 text-primary">业务咨询</h3>

              <div class="grid md:grid-cols-2 gap-6 mb-6">
                <div>
                  <label
                    for="name"
                    class="block text-sm font-medium text-gray-700 mb-2"
                    >姓名</label
                  >
                  <input
                    type="text"
                    id="name"
                    name="name"
                    class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary transition-colors"
                    placeholder="请输入您的姓名"
                  />
                </div>

                <div>
                  <label
                    for="company"
                    class="block text-sm font-medium text-gray-700 mb-2"
                    >企业名称</label
                  >
                  <input
                    type="text"
                    id="company"
                    name="company"
                    class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary transition-colors"
                    placeholder="请输入企业名称"
                  />
                </div>
              </div>

              <div class="mb-6">
                <label
                  for="email"
                  class="block text-sm font-medium text-gray-700 mb-2"
                  >电子邮箱</label
                >
                <input
                  type="email"
                  id="email"
                  name="email"
                  class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary transition-colors"
                  placeholder="请输入您的邮箱"
                />
              </div>

              <div class="mb-6">
                <label
                  for="phone"
                  class="block text-sm font-medium text-gray-700 mb-2"
                  >联系电话</label
                >
                <input
                  type="tel"
                  id="phone"
                  name="phone"
                  class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary transition-colors"
                  placeholder="请输入您的电话"
                />
              </div>

              <div class="mb-6">
                <label
                  for="需求类型"
                  class="block text-sm font-medium text-gray-700 mb-2"
                  >需求类型</label
                >
                <select
                  id="inquiryType"
                  name="inquiryType"
                  class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary transition-colors"
                >
                  <option value="">请选择需求类型</option>
                  <option value="digital-twin">工业数字孪生解决方案</option>
                  <option value="modeling">工业模型制作</option>
                  <option value="consulting">技术咨询服务</option>
                  <option value="other">其他需求</option>
                </select>
              </div>

              <div class="mb-6">
                <label
                  for="message"
                  class="block text-sm font-medium text-gray-700 mb-2"
                  >备注信息</label
                >
                <textarea
                  id="message"
                  name="message"
                  rows="4"
                  class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-primary transition-colors"
                  placeholder="请输入您的需求描述"
                ></textarea>
              </div>

              <button
                type="submit"
                class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-6 rounded-lg transition-all transform hover:scale-[1.02]"
              >
                提交咨询 <i class="fa fa-paper-plane ml-2"></i>
              </button>
            </form>
          </div>
        </div>
      </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-12">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid md:grid-cols-4 gap-8 mb-12">
          <div>
            <div class="flex items-center mb-6">
              <div
                class="w-10 h-10 rounded-lg flex items-center justify-center text-white font-bold text-xl"
              >
                <img src="./img/logo.png" alt="logo" />
              </div>
              <span class="ml-3 text-xl font-bold">济南联宇网络科技</span>
            </div>
            <p class="text-gray-400 text-sm mb-6">
              专注工业数字孪生技术研发与工业模型定制服务，为企业提供一站式工业数字化解决方案。
            </p>
            <div class="flex space-x-4">
              <a
                href="#"
                class="text-gray-400 hover:text-white transition-colors"
              >
                <i class="fa fa-weixin"></i>
              </a>
              <a
                href="#"
                class="text-gray-400 hover:text-white transition-colors"
              >
                <i class="fa fa-weibo"></i>
              </a>
              <a
                href="#"
                class="text-gray-400 hover:text-white transition-colors"
              >
                <i class="fa fa-linkedin"></i>
              </a>
              <a
                href="#"
                class="text-gray-400 hover:text-white transition-colors"
              >
                <i class="fa fa-youtube-play"></i>
              </a>
            </div>
          </div>

          <div>
            <h4 class="text-lg font-semibold mb-6">快速链接</h4>
            <ul class="space-y-3">
              <li>
                <a
                  href="#about"
                  class="text-gray-400 hover:text-white transition-colors"
                  >关于我们</a
                >
              </li>
              <li>
                <a
                  href="#services"
                  class="text-gray-400 hover:text-white transition-colors"
                  >核心业务</a
                >
              </li>
              <li>
                <a
                  href="#cases"
                  class="text-gray-400 hover:text-white transition-colors"
                  >成功案例</a
                >
              </li>
              <li>
                <a
                  href="#advantages"
                  class="text-gray-400 hover:text-white transition-colors"
                  >服务优势</a
                >
              </li>
              <li>
                <a
                  href="#contact"
                  class="text-gray-400 hover:text-white transition-colors"
                  >联系我们</a
                >
              </li>
            </ul>
          </div>

          <div>
            <h4 class="text-lg font-semibold mb-6">业务范围</h4>
            <ul class="space-y-3">
              <li>
                <a
                  href="#"
                  class="text-gray-400 hover:text-white transition-colors"
                  >工业数字孪生解决方案</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="text-gray-400 hover:text-white transition-colors"
                  >实时数据孪生</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="text-gray-400 hover:text-white transition-colors"
                  >实时仿真模拟</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="text-gray-400 hover:text-white transition-colors"
                  >沉浸式交互体验</a
                >
              </li>
              <li>
                <a
                  href="#"
                  class="text-gray-400 hover:text-white transition-colors"
                  >工业模型制作</a
                >
              </li>
            </ul>
          </div>

          <div>
            <h4 class="text-lg font-semibold mb-6">联系信息</h4>
            <ul class="space-y-3">
              <li class="flex items-start">
                <i class="fa fa-map-marker text-accent mt-1 mr-3"></i>
                <span class="text-gray-400"
                  >山东省济南市高新区舜华路2000号舜泰广场1号楼东座6楼601A室</span
                >
              </li>
              <li class="flex items-start">
                <i class="fa fa-phone text-accent mt-1 mr-3"></i>
                <span class="text-gray-400">18766416767</span>
              </li>
              <li class="flex items-start">
                <i class="fa fa-envelope text-accent mt-1 mr-3"></i>
                <span class="text-gray-400">jnzhy@qq.com</span>
              </li>
            </ul>
          </div>
        </div>

        <div
          class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center"
        >
          <p class="text-gray-400 text-sm mb-4 md:mb-0">
            © 2025 济南联宇网络科技有限公司 版权所有
          </p>

          <a
            href="https://beian.miit.gov.cn/"
            class="text-gray-400 text-sm mb-4 md:mb-0"
            >鲁ICP备18001192号</a
          >
          <a
            href="https://beian.miit.gov.cn/"
            class="text-gray-400 text-sm mb-4 md:mb-0"
            >鲁ICP备18001192号-1</a
          >
          <a
            href="https://beian.miit.gov.cn/"
            class="text-gray-400 text-sm mb-4 md:mb-0"
            >鲁ICP备18001192号-2</a
          >
          <div class="flex space-x-6">
            <a
              href="#"
              class="text-gray-400 hover:text-white text-sm transition-colors"
              >隐私政策</a
            >
            <a
              href="#"
              class="text-gray-400 hover:text-white text-sm transition-colors"
              >服务条款</a
            >
            <a
              href="#"
              class="text-gray-400 hover:text-white text-sm transition-colors"
              >网站地图</a
            >
          </div>
        </div>
      </div>
    </footer>

    <!-- 返回顶部按钮 -->
    <button
      id="back-to-top"
      class="fixed bottom-8 right-8 bg-primary hover:bg-primary/90 text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg transition-all opacity-0 invisible"
    >
      <i class="fa fa-chevron-up"></i>
    </button>

    <script>
      // 导航栏滚动效果
      const navbar = document.getElementById("navbar");
      const backToTop = document.getElementById("back-to-top");

      window.addEventListener("scroll", function () {
        if (window.scrollY > 100) {
          navbar.classList.add("bg-primary", "shadow-md");
          navbar.classList.remove("bg-transparent");

          backToTop.classList.remove("opacity-0", "invisible");
          backToTop.classList.add("opacity-100", "visible");
        } else {
          navbar.classList.remove("bg-primary", "shadow-md");
          navbar.classList.add("bg-transparent");

          backToTop.classList.add("opacity-0", "invisible");
          backToTop.classList.remove("opacity-100", "visible");
        }
      });

      // 移动端菜单
      const menuToggle = document.getElementById("menu-toggle");
      const mobileMenu = document.getElementById("mobile-menu");
      let menuOpen = false;

      menuToggle.addEventListener("click", function () {
        if (menuOpen) {
          mobileMenu.classList.add("hidden", "-translate-y-2", "opacity-0");
          mobileMenu.classList.remove("translate-y-0", "opacity-100");
          menuToggle.innerHTML = '<i class="fa fa-bars"></i>';
        } else {
          mobileMenu.classList.remove("hidden", "-translate-y-2", "opacity-0");
          mobileMenu.classList.add("translate-y-0", "opacity-100");
          menuToggle.innerHTML = '<i class="fa fa-times"></i>';
        }
        menuOpen = !menuOpen;
      });

      // 平滑滚动
      document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
        anchor.addEventListener("click", function (e) {
          e.preventDefault();

          // 关闭移动菜单（如果打开）
          if (menuOpen) {
            mobileMenu.classList.add("hidden", "-translate-y-2", "opacity-0");
            mobileMenu.classList.remove("translate-y-0", "opacity-100");
            menuToggle.innerHTML = '<i class="fa fa-bars"></i>';
            menuOpen = false;
          }

          const targetId = this.getAttribute("href");
          if (targetId === "#") return;

          const targetElement = document.querySelector(targetId);
          if (targetElement) {
            window.scrollTo({
              top: targetElement.offsetTop - 80,
              behavior: "smooth",
            });
          }
        });
      });

      // 返回顶部
      backToTop.addEventListener("click", function () {
        window.scrollTo({
          top: 0,
          behavior: "smooth",
        });
      });

      // 业务标签页切换
      const serviceTabs = document.querySelectorAll(".service-tab");
      const serviceContents = document.querySelectorAll(".service-content");

      serviceTabs.forEach((tab) => {
        tab.addEventListener("click", () => {
          // 移除所有活动状态
          serviceTabs.forEach((t) => {
            t.classList.remove("active", "bg-primary", "text-white");
            t.classList.add("bg-gray-200", "text-gray-700");
          });

          serviceContents.forEach((content) => {
            content.classList.remove("active");
            content.classList.add("hidden");
          });

          // 添加当前活动状态
          tab.classList.add("active", "bg-primary", "text-white");
          tab.classList.remove("bg-gray-200", "text-gray-700");

          const target = tab.getAttribute("data-tab");
          document.getElementById(target).classList.add("active");
          document.getElementById(target).classList.remove("hidden");
        });
      });

      // 初始化标签样式
      document
        .querySelector(".service-tab.active")
        .classList.add("bg-primary", "text-white");
      document
        .querySelector(".service-tab.active")
        .classList.remove("bg-gray-200", "text-gray-700");

      // 技术能力图表
      const ctx = document.getElementById("skillsChart").getContext("2d");
      const skillsChart = new Chart(ctx, {
        type: "radar",
        data: {
          labels: [
            "三维建模与渲染",
            "工业数据采集与处理",
            "实时仿真与模拟",
            "VR/AR交互开发",
            "工业系统集成",
            "跨平台部署",
          ],
          datasets: [
            {
              label: "技术能力",
              data: [95, 90, 88, 85, 92, 87],
              fill: true,
              backgroundColor: "rgba(255, 152, 0, 0.2)",
              borderColor: "rgba(255, 152, 0, 1)",
              pointBackgroundColor: "rgba(255, 152, 0, 1)",
              pointBorderColor: "#fff",
              pointHoverBackgroundColor: "#fff",
              pointHoverBorderColor: "rgba(255, 152, 0, 1)",
            },
          ],
        },
        options: {
          elements: {
            line: {
              borderWidth: 3,
            },
          },
          scales: {
            r: {
              angleLines: {
                display: true,
                color: "rgba(255, 255, 255, 0.1)",
              },
              grid: {
                color: "rgba(255, 255, 255, 0.1)",
              },
              pointLabels: {
                color: "#666",
                font: {
                  size: 12,
                },
              },
              ticks: {
                backdropColor: "transparent",
                color: "#999",
              },
            },
          },
        },
      });

      // 增强移动端适配
      function adjustForMobile() {
        const isMobile = window.innerWidth < 768;

        // 调整图片显示
        document.querySelectorAll("img").forEach((img) => {
          if (isMobile) {
            img.classList.add("object-cover");
          } else {
            img.classList.remove("object-cover");
          }
        });

        // 调整表格显示
        const tables = document.querySelectorAll("table");
        tables.forEach((table) => {
          if (isMobile) {
            table.parentNode.classList.add("overflow-x-auto");
          }
        });
      }

      // 初始化和窗口大小变化时调整
      window.addEventListener("load", adjustForMobile);
      window.addEventListener("resize", adjustForMobile);
      document.querySelector("form").addEventListener("submit", async (e) => {
        e.preventDefault(); // 阻止默认提交

        const formData = new FormData(e.target);
        const data = Object.fromEntries(formData);
        console.log(JSON.stringify(data));

        // 示例：发送到你的后端 API 或第三方服务（如 Formspree、Netlify Forms 等）
        try {
          const res = await fetch("/submit", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(data),
          });
          if (res.ok) {
            alert("咨询已提交，我们会尽快联系您！");
            e.target.reset(); // 清空表单
          } else {
            alert("提交失败，请稍后再试。");
          }
        } catch (err) {
          alert("网络错误，请检查连接。");
        }
      });
    </script>
  </body>
</html>
